<template>
  <div class="wrapper">
    <div class="pageTurning pageTurningPre" @click="turnPagePre" style="margin-right: 20px;">
      <svg-icon icon-name="arrow" style="width: 23px; height: 23px"></svg-icon>
    </div>
    <!-- <div> -->
    <div class="left" style="margin-right: 10px;">
      <div class="border" style="width: 30vw; margin-top: 0.3vw; z-index: 1; height: 42%">
          <div class="title">热门就业城市的生活成本与薪资对比</div>
          <div class="leftHeader">
          <div id="bubbleChart" style="width: 100%; height: 90%"></div><!--柱状图展示  各城市的岗位数-->
          </div>
        </div>
      <div class="border" style="width: 30vw; margin-top: 5px; height: 58%">
          <div class="title">各行业周工作时间分布</div>
          <div class="leftCenter">
            <div id="pyramidChart" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div style="position: relative;">
          <div id="mapDom" style="width: 100%; height: 74vh;margin-top:11vh" class="map"></div>
          <div style="color: #fff;position: absolute;top: 0;left: 0;">GS京(2022)1061号</div>
        </div>
      </div>
      <div class="right">
      <div class="border" style="margin-top: 0.3vw; height: 40%">
          <div class="title">统计领域出现频率前 10 排行榜</div>
          <div class="rightHeader">
            <table>
              <thead>
                <tr>
                  <th>行业名称</th>
                  <th>平均薪资</th>
                  <th>岗位数量</th>
                  <th>毕业人数</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.row1Cell1 }}</td>
                  <td>{{ item.row1Cell2 }}</td>
                  <td>{{ item.row1Cell3 }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="border" style="margin-top: 5px; height: 58%">
          <div class="title">学历与就业比例</div>
          <div class="rightFooter"></div>
        </div>
      <!-- </div> -->
    </div>
    <div class="pageTurning pageTurningNext" @click="turnPageNext" style="margin-left: 20px;">
      <svg-icon class="flipArrow" icon-name="arrow" style="width: 23px; height: 23px"></svg-icon>
    </div>
    <!-- 完善用户信息弹窗 -->
    <UserInfo ref="improveUserInfo"></UserInfo>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import { getCityPositionByName } from "../assets/js/cityPostion";
import {
  cityCounts,
  graduates,
  educationLevel,
  fieldCounts,
  employmentRate,
  recruitmenFair,
  getChinaData
} from "../api/visualizationData";
import * as echarts from "echarts";
import "echarts-wordcloud";
import { ElMessage } from "element-plus";
import "../assets/js/china.js";
import UserInfo from "../components/improveUserInformation.vue";
import wordCloud from "../components/wordCloud.vue";
import { useUserInfor } from "@/stores/userInfo";
import * as commonUtil from "@/utils/commonUtil";
import geoJson from "@/assets/json/中华人民共和国.json";
import { useRoute, useRouter } from "vue-router";


const route = useRoute();
const router = useRouter();

const userStore = useUserInfor();

// components:{map}
onMounted(() => {

  // 气泡图 - 热门城市生活成本与工资
  const bubbleChart = echarts.init(document.getElementById('bubbleChart'));

  const getChinaDatas = async () => {
    const res = await getChinaData();
    if (res.code === 200) {
      const bubbleOption = {
        tooltip: {
          trigger: 'item',
          formatter: params => {
            return `${params.data.name}<br/>
        平均月薪: ${params.data.value[0]}元<br/>
        生活费用占比: ${params.data.value[1]}%<br/>
        薪酬性价比: ${params.data.value[2]}`;
          }
        },
        xAxis: {
          name: '月平均工资 (元)',
          nameLocation: 'middle',
          nameGap: 30,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          name: '生活费用占比',
          nameLocation: 'middle',
          nameGap: 30,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        visualMap: {
          show: false,
          dimension: 2,
          min: 0,
          max: 100,
          inRange: {
            color: ['#F0EBE3', '#F8DAA8', '#D69955']
          }
        },
        series: [{
          type: 'scatter',
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 17;
          },
          data: res.data[0].citySalary.map(item => {
            return {
              name: item.name,
              value: [
                parseFloat(item.value[0]),
                parseFloat(item.value[2].replace("%", '')),
                parseFloat(item.value[3]),
                item.name
              ]
            }
          }),
          itemStyle: {
            opacity: 0.8
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      window.addEventListener("resize", () => {
    bubbleChart.resize();
    });
  bubbleChart.setOption(bubbleOption);
    }
  }
  getChinaDatas();

  // 金字塔图 - 不同行业工作时长分布
  const pyramidChart = echarts.init(document.getElementById('pyramidChart'));

  const getHours = async () => {
    const res = await getChinaData();
    if (res.code === 200) {
      const industries = res.data[0].industryWorkHours.map(item => item.name);
      const hoursRanges = ['30小时左右', '40小时左右', '50小时左右', '60小时左右'];

      // 生成金字塔数据
      function generatePyramidData() {
        const data = res.data[0].industryWorkHours.map((item, index) => {
          return hoursRanges.map((range, j) => {
            return {
              name: item.name,
              value: parseFloat(item.value[j]), // 使用实际数据
              group: item.name,
              hourRange: range,
              itemStyle: {
                color: ['#F0EBE3', '#F8DAA8', '#D69955', '#A37C40', '#6A4E2B'][index % 5]
              }
            };
          });
        }).flat(); // 将二维数组展平为一维数组
        return data;
      }

      const pyramidOption = {
        color: ['#F0EBE3', '#F8DAA8', '#D69955', '#A37C40', '#6A4E2B'],
        tooltip: {
          trigger: 'item',
          formatter: params => `${params.data.group}<br/>工作时长: ${params.data.hourRange}<br/>占比: ${params.data.value}%`
        },
        legend: {
          data: industries,
          bottom: 0,
          textStyle: { color: '#fff' }
        },
        grid: {
          left: '3%', // 增加左侧边距
          right: '5%', // 增加右侧边距
          top: '10%', // 增加上边边距
          bottom: '20%', // 增加下边边距
          containLabel: true // 确保标签不超出边界
        },
        xAxis: {
          type: 'value',
          position: 'top',
          axisLabel: { color: '#fff' },
          axisLine: { lineStyle: { color: '#fff' } }
        },
        yAxis: {
          type: 'category',
          data: hoursRanges,
          axisLabel: { color: '#fff' },
          axisLine: { lineStyle: { color: '#fff' } }
        },
        series: industries.map((industry, index) => ({
          name: industry,
          type: 'bar',
          stack: 'total',
          data: generatePyramidData().filter(item => item.group === industry),
          label: { show: true, position: 'inside', formatter: '{c}%' }
        }))
      };

      pyramidChart.setOption(pyramidOption);
    }
  };

  getHours();

  // 监听窗口大小变化
  window.addEventListener('resize', function () {
    pyramidChart.resize();
  });

  //折线图数据展示
  // let lineChart = echarts.init(document.querySelector(".leftCenter"));
  // const getGraduates = async () => {
  //   const res = await graduates();
  //   //指定配置项和数据
  //   const lineChartOption = {
  //     tooltip: {
  //       trigger: "axis",
  //     },
  //     legend: {
  //       data: ["省内", "省外"],
  //       textStyle: {
  //         // 设置图例文字的样式
  //         color: "#fff", // 图例文字颜色为白色
  //       },
  //     },
  //     grid: {
  //       left: "3%",
  //       right: "4%",
  //       bottom: "3%",
  //       containLabel: true,
  //     },
  //     // toolbox: {
  //     //   feature: {
  //     //     saveAsImage: {}
  //     //   }
  //     // },
  //     xAxis: {
  //       type: "category",
  //       boundaryGap: false,
  //       data: res.data.year,
  //     },
  //     yAxis: {
  //       type: "value",
  //     },
  //     series: [
  //       {
  //         name: "省内",
  //         type: "line",
  //         stack: "Total",
  //         data: res.data.gdGrads,
  //         label: {
  //           show: true, // 显示标签
  //           position: "top", // 标签位置
  //           formatter: "{c} 万",
  //           // 可以定义更多样式，如颜色、字体大小等
  //           color: "#fff",
  //           fontSize: 12,
  //         },
  //         color: "#D69955"
  //       },
  //       {
  //         name: "省外",
  //         type: "line",
  //         stack: "Total",
  //         data: res.data.gdOutGrads,
  //         label: {
  //           show: true, // 显示标签
  //           position: "top", // 标签位置
  //           formatter: "{c} 万",
  //           // 可以定义更多样式，如颜色、字体大小等
  //           color: "#fff",
  //           fontSize: 12,
  //         },
  //         color: "#E4DCCF"
  //       },
  //     ],
  //   };
  //   //将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
  //   lineChart.setOption(lineChartOption);
  // };
  // getGraduates();
  // // 监听窗口大小变化，重新调整ECharts实例的大小
  // window.addEventListener("resize", () => {
  //   lineChart.resize();
  // });

  //柱状数据展示
  // let barChart = echarts.init(document.querySelector(".leftHeader"));
  // //获取数据
  // const getlineChartData = async () => {
  //   const res = await cityCounts();
  //   if (res.code === 200) {
  //     //指定配置项和数据
  //     const barChartOption = {
  //       tooltip: {},
  //       xAxis: {
  //         type: "category",
  //         data: res.data.cityList.slice(0, 10),
  //       },
  //       yAxis: {
  //         type: "value",
  //       },
  //       series: [
  //         {
  //           data: res.data.countList.slice(0, 10),
  //           type: "bar",
  //           barWidth: "40%", // 柱条宽度
  //           itemStyle: {
  //             color: {
  //               type: 'linear', // 渐变类型为线性渐变
  //               x: 0,          // 渐变起始点的 x 坐标（0 表示左侧）
  //               y: 1,          // 渐变起始点的 y 坐标（0 表示顶部）
  //               x2: 0,         // 渐变结束点的 x 坐标（0 表示左侧）
  //               y2: 0,         // 渐变结束点的 y 坐标（1 表示底部）
  //               colorStops: [  // 渐变颜色的节点
  //                 { offset: 0, color: 'rgba(214, 153, 85, 1)' }, // 0% 处的颜色，不透明
  //                 { offset: 1, color: 'rgba(214, 153, 85, 0)' }  // 100% 处的颜色，完全透明
  //               ]
  //             }
  //             // barBorderRadius: [10, 10, 0, 0], // 顶部为圆角，底部为方形
  //           },
  //           label: {
  //             show: true, // 显示标签
  //             position: "top", // 标签的位置
  //             formatter: "{c}", // 显示柱体的数据
  //             fontSize: 12, // 字体大小
  //             fontFamily: "Arial", // 字体家族
  //             fontWeight: "200", // 字体粗细
  //             color: "#fff", // 字体颜色
  //           },
  //           emphasis: {
  //             itemStyle: {
  //               color: {
  //                 type: 'linear', // 渐变类型为线性渐变
  //                 x: 0,          // 渐变起始点的 x 坐标（0 表示左侧）
  //                 y: 0,          // 渐变起始点的 y 坐标（0 表示顶部）
  //                 x2: 0,         // 渐变结束点的 x 坐标（0 表示左侧）
  //                 y2: 1,         // 渐变结束点的 y 坐标（1 表示底部）
  //                 colorStops: [  // 渐变颜色的节点
  //                   { offset: 0, color: 'rgba(214, 153, 85, 1)' }, // 0% 处的颜色，不透明
  //                   { offset: 1, color: 'rgba(214, 153, 85, 0)' }  // 100% 处的颜色，完全透明
  //                 ]
  //               }, // 点击时其他柱体的颜色
  //             },
  //           },
  //         },
  //       ],
  //     };

  //     //将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
  //     barChart.setOption(barChartOption);
  //   }
  // };
  // getlineChartData();
  // // 监听窗口大小变化，重新调整ECharts实例的大小
  // window.addEventListener("resize", () => {
  //   barChart.resize();
  // });



  //环状图数据展示
  let circularDiagram = echarts.init(document.querySelector(".rightFooter"));
  //获取学历与就业比例数据
  const getEducationLevel = async () => {
    const res = await educationLevel();
    if (res.code === 200) {
      //指定配置项和数据
      const circularDiagramOption = {
        tooltip: {
          trigger: "item",
          formatter: '{a} <br/>{b}: {c}%'  // {c} 是 value，直接加 %
        },
        legend: {
          top: "3%",
          left: "center",
          textStyle: {
            // 设置图例文字的样式
            color: "#fff", // 图例文字颜色为白色
          },
        },
        series: [
          {
            name: "学历与就业比例",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "56%"], // 添加这个属性来设置环状图的中心位置
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderWidth: 2,
            },
            label: {
              show: true, // 显示标签
              position: "outside", // 标签显示在扇区外部
              formatter: "{b}", // 标签内容为名称
              color: "#fff", // 标签文字颜色为白色
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,

                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true, // 显示连接线
              length: 20, // 连接线的长度
              length2: 30, // 连接线第二段的长度
            },
            data: res.data.map((item, index) => ({
              ...item,
              itemStyle: {
                color: ['#F0EBE3', '#F8DAA8', '#D69955',][index % 3], // 自定义颜色
              },
            })),
          },
        ],
      };
      //将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
      circularDiagram.setOption(circularDiagramOption);
    }
  };
  getEducationLevel();
  // 监听窗口大小变化，重新调整ECharts实例的大小
  window.addEventListener("resize", () => {
    circularDiagram.resize();
  });
});

//循环表格展示
const tableData = ref([
  // 你的表格数据
  { Row1Cell1: 1, Row1Cell2: 2, Row1Cell3: 3 },
  { Row1Cell1: 2, Row1Cell2: 2, Row1Cell3: 3 },
  { Row1Cell1: 3, Row1Cell2: 2, Row1Cell3: 3 },
  { Row1Cell1: 4, Row1Cell2: 2, Row1Cell3: 3 },
  { Row1Cell1: 5, Row1Cell2: 2, Row1Cell3: 3 },
  { Row1Cell1: 6, Row1Cell2: 2, Row1Cell3: 3 },
  { Row1Cell1: 7, Row1Cell2: 2, Row1Cell3: 3 },
]);
let timer = null;

//获取领域排名
const getFieldCounts = async () => {
  const res = await fieldCounts();
  if (res.code === 200) {
    console.log(res);
    tableData.value = res.data;
  }
};
getFieldCounts();

//获取行业排名
const getIndustryCounts = async () => {
  const res = await industryCounts();
  if (res.code === 200) {
    console.log(res);
  }
};

const scrollTable = () => {
  // 获取第一行数据
  const firstRow = tableData.value.shift();
  tableData.value.push(firstRow);
};

//招聘会数据
const recruitmenFairData = ref([]);
const getRecruitmenFairData = async () => {
  const res = await recruitmenFair();
  if (res.code === 200) {
    recruitmenFairData.value = res.data.slice(0, 4);
  }
};
getRecruitmenFairData();

onMounted(() => {
  // 设置一个定时器
  timer = setInterval(scrollTable, 2000);
});

onBeforeUnmount(() => {
  // Clear the interval when the component is destroyed
  clearInterval(timer);
});

//查询用户信息
userStore.queryUserInfo();
//判断用户必备信息是否存在
const isNecessaryInfo = ref(true);
//检查必备信息是否完整
const inspectInformation = () => {
  const userInfo = userStore.userInfo;
  //如果必要的信息不完整，则在组件加载完之后，弹窗完善信息输入框
  if (
    userInfo.education == null ||
    userInfo.major == null ||
    userInfo.jobRegion == null ||
    userInfo.desiredPosition == null
  ) {
    isNecessaryInfo.value = false;
  }
  //如果信息不完整，则在组件加载完之后，弹窗完善信息输入框
  if (
    userInfo.age == null ||
    userInfo.school == null ||
    userInfo.studyStatus == null ||
    userInfo.gender == null ||
    userInfo.minSalary == null ||
    userInfo.maxSalary == null ||
    userInfo.phone == null
  ) {
    ElMessage({
      type: "warning",
      message: "请前往个人中心，完善个人信息",
    });
  }
};
//完善信息弹窗
const improveUserInfo = ref();
onMounted(() => {
  //查询并检查用户信息是否完整
  // if (commonUtil.getStore("token")) {
  //   inspectInformation();
  // }
  // if (commonUtil.getStore("token") && isNecessaryInfo.value == false) {
  //   //打开完善信息弹窗
  //   ElMessage({
  //     type: "warning",
  //     message: "请完善个人信息",
  //   });
  //   improveUserInfo.value.open();
  // }

  // 获取地图中的平均薪资，就业率数据
  let mockData = ref([]);

  const getEmploymentRate = async () => {
    const res = await employmentRate(); // 假设 employmentRate 是一个返回 Promise 的异步函数
    if (res.code === 200) {
      mockData.value = res.data; // 直接更新 mockData 的值
    }
  };

  // 等待 getEmploymentRate 完成后再处理 mockData
  async function processMockData() {
    await getEmploymentRate(); // 等待 getEmploymentRate 完成
    let data = mockData.value.map((i) => {
      let cityPosition = getCityPositionByName(i.name).value; // 假设这个函数返回城市的经纬度
      return {
        name: i.name,
        value: cityPosition.concat(i.value),
      };
    });
    // 在这里处理 data，例如赋值给另一个变量或进行渲染
    let initMap = echarts.init(document.querySelector("#mapDom"));

    echarts.registerMap("china", geoJson);
    initMap.setOption({
      backgroundColor: "transparent", // 设置背景色透明
      tooltip: {
        //这里设置提示框
        trigger: "item", //数据项图形触发
        backgroundColor: "#D69955", //提示框浮层的背景颜色
        color: "#576F72",
        formatter: function (params) {
          let data = params.data;

          // 如果 params.data 为 undefined，尝试从 series.data 中获取数据
          if (!data) {
            // 尝试从 series.data 中查找匹配的数据
            data = positionArr.find((item) => item.name === params.name);
          }

          // 如果 data 仍然为 undefined，返回默认提示
          if (!data) {
            return `${params.name}<br/>无详细数据`;
          }

          // 如果 data 中有 value 属性，直接使用
          if (data.value) {
            return `${data.name}<br/>
          就业率：${data.value[2]}%<br/>
          平均薪资：${data.value[3]}元
        `;
          } else {
            // 如果 data 中没有 value 属性，可能是从 positionArr 中获取的数据
            return `${data.name}<br/>无详细数据`;
          }
        },
      },
      // 地图阴影配置
      geo: {
        map: "china",
        tooltip: {
          show: false,
        },
        label: {
          show: false,
        },
        zoom: 1.03,
        silent: true, // 不响应鼠标事件
        show: true,
        roam: false, // 地图缩放和平移
        aspectScale: 0.75, // scale 地图的长宽比
        itemStyle: {
          borderColor: "#F8FBFE",
          borderWidth: 1,
          areaColor: "#D69955", // 修改为灰色
          shadowColor: "#",
          shadowBlur: 10,
          shadowOffsetX: -10,
          shadowOffsetY: 10,
        },
        select: {
          disabled: true,
        },
        emphasis: {
          disabled: true,
          areaColor: "#00F1FF",
        },
        top: "10%",
        left: "center",
        regions: [
          {
            name: "南海诸岛",
            selected: false,
            emphasis: {
              disabled: true,
            },
            itemStyle: {
              areaColor: "#00000000",
              borderColor: "#00000000",
            },
          },
        ],
        z: 1,
      },
      series: [
        {
          type: "map",
          map: "china",
          zoom: 1,
          tooltip: {
            show: true,
          },
          label: {
            show: false, // 显示省份名称
            color: "#3F5B62",
            align: "center",
          },
          top: "10%",
          left: "center",
          aspectScale: 0.75,
          roam: false, // 地图缩放和平移
          itemStyle: {
            borderColor: "#F8FBFE", // 省分界线颜色  阴影效果的
            borderWidth: 1,
            areaColor: "#F8DAA8", // 修改为灰色
            opacity: 1,
          },
          select: {
            disabled: true,
          },
          emphasis: {
            disabled: false, // 开启高亮
            label: {
              align: "center",
              color: "#a3a3a3",
            },
            itemStyle: {
              color: "#a3a3a3",
              areaColor: "#D69955", // 修改为灰色
            },
          },
          z: 2,
          data: data,
        },
      ],
    });

    // 监听窗口大小变化，重新调整ECharts实例的大小
    window.addEventListener("resize", () => {
      initMap.resize();
    });
  }

  processMockData();
});


//跳转前一页
const turnPagePre = () => {
  router.push({
    path: "/Visualization/college",
    // query: { id: noticeData.value.prevId },
  });
};

//跳转后一页
const turnPageNext = () => {
  router.push({
    path: "/Visualization/province",
    // query: { id: noticeData.value.nextId },
  });
};


</script>

<style lang="scss" scoped>

.grid-container {
  display: flex;
  // grid-template-columns: 1fr 1fr 1fr; /* PC 端左中右布局 */
  // gap: 10px;
  width: 91%;
  flex-direction: row;
  flex-wrap: wrap;
}

// 为确保媒体查询能正确响应，添加 !important 以提高样式优先级，并打印日志进行调试
// @media (max-width: 768px) { /* 移动端样式 */
//   .grid-container {
//     grid-template-columns: 1fr !important; /* 移动端竖着排列，添加 !important 提高优先级 */
//   }
//   // 打印日志，方便调试媒体查询是否触发
//   body::before {
//     content: "移动端媒体查询已触发";
//     display: block;
//     color: red;
//     font-size: 16px;
//     position: fixed;
//     top: 0;
//     left: 0;
//     z-index: 9999;
//   }
// }

// 标题公共样式
.title {
  width: 100%;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  color: #000;
  padding: 5px 0px 5px 10px;
  margin: 5px;
  display: inline-block;
  background: linear-gradient(to right,
      #F0EBE3,
      rgba(240, 235, 227, 0.8),
      rgba(240, 235, 227, 0.6),
      rgba(240, 235, 227, 0.4),
      rgba(240, 235, 227, 0.2),
      rgba(240, 235, 227, 0));
}

.border {
  background: linear-gradient(to left, #DCDCDC, #DCDCDC) left top no-repeat,
    linear-gradient(to bottom, #DCDCDC, #DCDCDC) left top no-repeat,
    linear-gradient(to left, #DCDCDC, #DCDCDC) right top no-repeat,
    linear-gradient(to bottom, #DCDCDC, #DCDCDC) right top no-repeat,
    linear-gradient(to left, #DCDCDC, #DCDCDC) left bottom no-repeat,
    linear-gradient(to bottom, #DCDCDC, #DCDCDC) left bottom no-repeat,
    linear-gradient(to left, #DCDCDC, #DCDCDC) right bottom no-repeat,
    linear-gradient(to left, #DCDCDC, #DCDCDC) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px,
    2px 20px, 20px 2px;
  border: 1px solid #576F72;
  position: relative;
}

// .title {
//   display: inline-block;
//   width: 35%;
//   background: #05286c;
//   font-size: 14px;
//   position: absolute;
//   top: 0;
//   left: 32%;
//   padding: 4px 0px;
//   color: #19e8fe;
//   border-radius: 0 0 10px 10px;
// }
.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(100vh - 110px);
  justify-content: space-between;

  .left {
    display: inline-block;
    width: 32vw;

    //左上
    .leftHeader {
      width: 110%;
      height: 110%;
      position: absolute;
      top: 8px;
      left: -17px;
    }

    //左中
    .leftCenter {
      width: 100%;
      height: 80%;
      z-index: 1;
    }

    //左下
    .leftFooterTitle {
      width: 100%;
      height: 33vh;
      color: #fff;
      padding: 5px;
      margin: 5px;
      display: inline-block;
      background: linear-gradient(to right,
          #F0EBE3,
          rgba(240, 235, 227, 0.8),
          rgba(240, 235, 227, 0.6),
          rgba(240, 235, 227, 0.4),
          rgba(240, 235, 227, 0.2),
          rgba(240, 235, 227, 0));
    }

    .leftFooter {
      width: 100%;
      height: 195px;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
  }

  .center {
    width: 33vw;
    /* position: relative; */
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .centerTop {
      width: 95%;
      height: 100px;
      // margin-left: 10vw;
      display: flex;
      color: #fff;

      //标签
      .centerTopContent {
        display: flex;
        flex-direction: column;
        width: 25%;
        height: 100%;
        justify-content: center;
        align-items: center;

        //标签标题
        .centerTopTitle {
          padding: 13px 0;
        }
      }
    }

    //地图
    .map {
      // position: absolute;
      // top: 55px;
      width: 32vw;
      height: 40vh;
      // margin-left: 6vw;
    }

    //招聘会
    .centerBottom {
      width: 95%;
      height: 195px;
      // margin-left: 10vw;
      display: flex;
      color: #fff;
      flex-direction: column;
      margin-bottom: 0.3vw;

      //公告
      .notice {
        padding: 4px;
        width: 98%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        // display: flex;
      }

      .noticeContent {
        margin-left: 5px;
      }

      .notice:hover .noticeTitle {
        color: #D69955;
      }

      .notice:hover {
        cursor: pointer;
      }

      //点击查看更多招聘会信息
      .viewMore {
        display: flex;
        width: 98%;
        justify-content: flex-end;
      }

      .viewMore:hover {
        color: #D69955;
        cursor: pointer;
      }
    }
  }

  .right {

    //右上
    .rightHeaderTitle {
      // position: absolute;
      width: 400px;
      height: 100%;
      color: #fff;
      padding: 5px;
      margin: 5px;
      margin-bottom: 0;
      margin-left: 0;
      display: inline-block;
      // top: 0;
      // right: 32px;
      background: linear-gradient(to right,
          #F0EBE3,
          rgba(240, 235, 227, 0.8),
          rgba(240, 235, 227, 0.6),
          rgba(240, 235, 227, 0.4),
          rgba(240, 235, 227, 0.2),
          rgba(240, 235, 227, 0));
    }

    .rightHeader {
      width: 100%;
      height: 80%;
      overflow: hidden;
      // overflow-y: auto;
      // position: absolute;
      // right: 0;
      // top: 0;
      /*background-color: #fff;*/
    }

    //右中
    // .rightCenter {
    // height: 200px;
    // position: absolute;
    // right: 0;
    // top: 220px;
    /*background-color: #fff;*/
    // }

    //右下
    .rightFooter {
      width: 100%;
      height: 80%;
      // position: absolute;
      // right: 0;
      // top: 365px;
      /*background-color: #fff;*/
    }
  }
}

//表格
table {
  width: 98%;
  height: 100%;
  border-collapse: collapse;
  color: #fff;
  overflow: hidden;
  margin-top: 3px;
  margin-left: 4px;
}

td {
  // border: 1px solid #ddd;
  width: 100px;
  border-bottom: 1px solid #DCDCDC;
  height: 20px;
  padding: 8px;
  text-align: center;
}

th {
  background-color: rgba(240, 235, 227, 0.2);
  /* 半透明的背景颜色 */
  padding: 8px;
  text-align: center;
  // position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  /* 应用模糊滤镜 */
  z-index: 1;
  /* 确保元素在其他内容之上 */
  // border: 1px solid #73C0DE;
  border-radius: 10px;
}

// #mapDom {
//   position: relative; /* 确保容器是相对定位 */
//   width: 39vw;
//   height: 39vw;
// }

// #mapDom canvas {
//   position: absolute; /* 保持绝对定位 */
//   top: 0;
//   left: 0;
//   width: 100%; /* 设置为容器宽度的100% */
//   height: 100%; /* 设置为容器高度的100% */
// }

:deep(.map) {
  display: inline-block;
}

.pageTurning {
  margin-top: 36vh;
  width: 3%;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 初始阴影效果 */
}

.pageTurningNext:hover {
  transform: translateY(-5px) translateX(5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.pageTurningPre:hover {
  transform: translateY(-5px) translateX(-5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.flipArrow {
  transform: rotate(180deg);
  /* 立即旋转 180 度，不使用过渡动画 */
}

:deep(img) {
  width: 80%;
}
</style>
